export const componentList = () => {
  const component = document.querySelector('#component') as HTMLSelectElement;
  if (!component) {
    return;
  }
  const componentOptions = Array.from(document.querySelectorAll('#component > option')) as HTMLOptionElement[];

  const div = document.createElement('div');
  div.id = 'component_list_vue_app';
  (component.parentNode as HTMLDivElement).insertBefore(div, component);
  component.classList.add('bz_default_hidden');
  
  const { createApp, ref, reactive } = Vue;

  const app = createApp({
    template: `
      <n-select
        v-model:value="selectedValue"
        filterable
        :options="options"
        @update:value="handleUpdateValue"
      ></n-select>
    `,
    setup() {
      const selectedValue = ref(component.value);
      const options = reactive(componentOptions.map((option) => {
        return {
          label: option.innerText,
          value: option.value,
        }
      }));

      return {
        selectedValue,
        options,
        handleUpdateValue(value: string) {
          component.value = value;

          const errorComponents = Array.from(document.querySelectorAll(".validation_error_text")) as HTMLDivElement[];

          errorComponents.forEach((error) => {
            if (error.innerText == "You must select a Component for this bug.") {
              error.classList.add("bz_default_hidden");
            }
          })
        }
      }
    }
  });

  app.use(naive);
  app.mount('#component_list_vue_app');
};
